<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/technician'}">技师列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{titleText}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.name.request">*</span>{{modelList.name.name}}:</div>
        </el-col>
        <el-col :span="21">
          <el-input
                v-model="modelList.name.value"
                :placeholder="modelList.name.placeholder"
            ></el-input>
        </el-col>
      </el-row>
    </div>
     <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.store_id.request">*</span>{{modelList.store_id.name}}:</div>
        </el-col>
        <el-col :span="21">
          <el-select v-model="modelList.store_id.value" filterable placeholder="请选择">
            <el-option v-for="item in zzTypeist" :label="item.title" :value="item.id" :key="item.id"></el-option>
        </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.mobile.request">*</span>{{modelList.mobile.name}}:</div>
        </el-col>
        <el-col :span="21">
          <el-input
                v-model="modelList.mobile.value"
                :placeholder="modelList.mobile.placeholder"
            ></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.is_technician.request">*</span>{{modelList.is_technician.name}}:</div>
        </el-col>
        <el-col :span="21">
            <el-radio-group v-model="modelList.is_technician.value">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.cover.request">*</span>{{ modelList.cover.name }}:</div>
            </el-col>
            <el-col :span="21">
                <el-upload
                    class="avatar-uploader"
                    :action="imgLoadPath"
                    :show-file-list="false"
                    :on-success="handleHeaderSuccess"
                    :before-upload="beforeHeaderUpload"
                >
                    <img
                        v-if="modelList.cover.value"
                        :src="docLoadPath + modelList.cover.value"
                        class="avatar"
                        style="max-width: 100px"
                    />
                    <el-button v-else type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                </el-upload>
                <p style="color:red">图片规格：300*300(格式：jpg,png)</p>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.sort.request">*</span>{{modelList.sort.name}}:</div>
        </el-col>
        <el-col :span="21">
          <el-input
                v-model="modelList.sort.value"
                :placeholder="modelList.sort.placeholder"
                type="number"
            ></el-input>
            <p style="color:red">输入整数,数字越大排名越靠前</p>
        </el-col>
      </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.skill.request">*</span>技能:</div>
            </el-col>
            <el-col :span="21">
                <el-tag
                    style="margin:4px 4px 0 0"
                    v-for="(tag,index) in tags"
                    :key="index"
                    closable
                    @close="tagClose(index)"
                    >
                    {{tag}}
                </el-tag>
                <span style="margin-left:10px;">
                    <el-input v-model="tagsVal" placeholder="请输入" style="width:200px;" v-if="tagsShwo" @blur="tagInputMethod"></el-input>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="!tagsShwo" @click="tagsShwo=true"></el-button>
                </span>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
            </el-col>
            <el-col :span="21">
                <el-switch
                    v-model="modelList.status.value"
                    active-text="禁用"
                    inactive-text="启用">
                </el-switch>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.description.request">*</span>{{modelList.description.name}}:</div>
            </el-col>
            <el-col :span="21">
                <el-input
                    v-model="modelList.description.value"
                    :placeholder="modelList.description.placeholder"
                    :rows="6"
                    type="textarea"
                ></el-input>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.content.request">*</span>{{modelList.content.name}}:</div>
            </el-col>
            <el-col :span="21">
                <vue-editor :content="modelList.content.value" ref="myTextIntro"></vue-editor>
            </el-col>
        </el-row>
    </div>
    <div class="list-group"
         v-if="!judge"
         style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
      <el-button size="medium" @click="cancel" style="margin-right:40px;">取 消</el-button>
      <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import api from '@/api/index';
  import vueEditor from '@/components/views/commons/VueUeditorWrap';
  export default {
    name: 'positionAdd',
    components: {
        vueEditor
    },
    data: function () {
      return {
        zzTypeist:[],
        tags:[],
        tagsVal:'',
        tagsShwo:false,
        gridData:[],
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        docLoadPath: api.IMG_PATH,
        pageName:'',
        createTime:'',
        ht_names:'',
        createPerson:'',
        modelList:{
          "cover":{value:'',request:false,name:'员工封面',placeholder:'请员工封面',type:'input'},
          "name":{value:'',request:true,name:'员工姓名',placeholder:'请填写员工姓名',type:'input'},
          "store_id":{value:'',request:true,name:'员工所属门店',placeholder:'请选择所属门店',type:'input'},
          "mobile":{value:'',request:true,name:'员工电话',placeholder:'请输员工电话',type:'input'},
          "skill":{value:[],request:false,name:'员工技能',placeholder:'请输入员工技能',type:'input'},
          "description":{value:'',request:false,name:'员工描述',placeholder:'请输入员工描述',type:'input'},
          "content":{value:'',request:false,name:'员工详情',placeholder:'请输入员工详情',type:'input'},
          "sort":{value:'',request:false,name:'排序',placeholder:'请输入排序',type:'input'},
          "status":{value:false,request:false,name:'是否启用',placeholder:'请输入排序',type:'input'},
          "is_technician":{value:0,request:false,name:'是否技师',placeholder:'请选择是否技师',type:'input'},
        },
        judge:false,
        titleText:'',
        id:'',
        type:'',
        title:'',
        roomLists:[],
        provinceList:[],
        companyList:[],
        followList:[],
        routerPath:'',
        name_zs:'',
        parentPage:0
      }
    },
    mounted () {
      this.id = this.$route.query.id;//付款记录id
      this.type = this.$route.query.type;//查看类型
      if (this.type == 1) {
        this.titleText = "新增";
      } else if (this.type == 2) {
        this.judge = false;
        this.titleText = "编辑";
        this.initAjaxDetail()
      } else if (this.type == 3) {
        this.initAjaxDetail();
        this.judge = true;
        this.titleText = "查看"
      }
      this.ohterAjaxMethd()
    },
    methods: {
      tagInputMethod(){
          if(this.tagsVal.trim()!==''){
              this.tags.push(this.tagsVal)
              this.tagsVal='';
          }
          this.tagsShwo=false;
      },
      tagClose(index){
          this.tags.splice(index,1)
      },
      //保存
      preserve(){
        if(this.type == 1){
          this.addAjaxMethod()
        }else if(this.type == 2){
          this.editAjaxMethod()
        }

      },
      //取消
      cancel(){
        this.$router.push({path:'/technician'})
      },
      //详细信息api
      initAjaxDetail(){
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.TECHNICIAN_DETAIL,{id:this.id})
                .then((res)=>{
                  console.log('res',res);
                  loading.close();
                  if(res.code == 1){
                    this.modelList.cover.value=res.data.cover;
                    this.modelList.name.value=res.data.name;
                    this.modelList.mobile.value=res.data.mobile;
                    this.modelList.store_id.value=res.data.store_id;
                    this.tags=res.data.skill?(Array.isArray(res.data.skill.split(','))?res.data.skill.split(','):[]):[];
                    this.modelList.skill.value=res.data.skill
                    this.modelList.sort.value=res.data.sort;
                    this.modelList.description.value=res.data.description;
                    this.modelList.content.value=res.data.content;
                    this.modelList.is_technician.value=Number(res.data.is_technician);
                    this.modelList.status.value=res.data.status==0?false:true;
                    if(res.data.lng && res.data.lat){
                        this.setMark([res.data.lng,res.data.lat])
                    }
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      ohterAjaxMethd(){
        this.$http.post(api.TECHNICIAN_STORE_LIST)
            .then((res) => {
                console.log('城市列表', res)
                if (res.code == 1) {
                this.zzTypeist=Array.isArray(res.data)?res.data:[]
                } else {
                this.$message.error(res.msg);
                }
            })
            .catch((err) => {
                this.$message.error(err.msg);
            })
        },
      //编辑
      editAjaxMethod(){
        //验证
        let test=this.testMethod();
        if(!test.flag){
          this.$message.error(test.msg);
          return false;
        }else{
          test.data.id=this.id;
        }
        console.log('test.data',test.data)
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.TECHNICIAN_EDIT,test.data)
                .then((res)=>{
                  loading.close();
                  if(res.code == 1){
                    this.$message.success('编辑成功');
                    setTimeout(()=>{
                      this.$router.push({path:'/technician'})
                    },1000)
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      //新增api
      addAjaxMethod(){
        //验证
        let test=this.testMethod();
        console.log('test.data',test.data)
        if(!test.flag){
          this.$message.error(test.msg);
          return false;
        }
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.TECHNICIAN_ADD,test.data)
                .then((res)=>{
                  loading.close();
                  if(res.code == 1){
                    this.$message.success('添加成功');
                    setTimeout(()=>{
                      this.$router.push({path:'/technician'})
                    },1000)
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      //验证方法
      testMethod(){
        let flag=true,msg='',data={};
        this.modelList.content.value=this.$refs['myTextIntro'].getContent();
        this.modelList.skill.value=this.tags.join(',')
        for(let i in this.modelList){
          if(this.modelList[i].request){
            if(!this.modelList[i].value || this.modelList[i].value == ''){
              flag=false;
              msg=this.modelList[i].placeholder;
              break;
            }
          }
        }
        if(flag){
          data={
            "cover":this.modelList.cover.value,
            "name":this.modelList.name.value,
            "mobile":this.modelList.mobile.value,
            "store_id":this.modelList.store_id.value,
            "skill":this.modelList.skill.value,
            "description":this.modelList.description.value,
            "content":this.modelList.content.value,
            "is_technician":this.modelList.is_technician.value,
            "status":this.modelList.status.value==true?1:0,
            "sort":this.modelList.sort.value
          };
        }
        return {flag:flag,msg:msg,data:data}
      },
      //预登记headerpc头部
        handleHeaderSuccess(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.modelList.cover.value = res.data;
        },
        beforeHeaderUpload(file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,png文件！'
                });
                return false;
            }
        }
    }
  }
</script>


<style scoped>
  .list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #333;
  }
  .list-group {
    padding: 10px 0;
  }
  h2 {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
  }
  h2:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #409eff;
  }
  .map-group{
      position: relative;
  }
  .map-search{
      display: flex;
      align-items: center;
      position: absolute;
      top:10px;
      left:10px;
      padding:10px;
      width:400px;
      background: #fff;
      z-index: 300;
  }
  .map-search input{
      height: 40px;
      border:1px solid #eee;
      font-size:14px;
      color:#888;
      flex-grow: 1;
      outline: none;
  }
  .serarch-result{
      position: absolute;
      top:55px;
      left:0;
      right:0;
      box-shadow: 1px 1px 4px -3px #000;
      background-color:#fff;
      max-height: 300px;
  }
  .serarch-list{
      border-bottom:1px solid #eee;
  }
  .serarch-list:hover{
      cursor: pointer;
      background-color:#eee;
  }
  .serarch-rows{
      display: flex;
      padding:6px 10px;
      font-size:14px;
      color: #333;
      align-items: center;
  }
  .serarch-rows span:nth-child(1){
      margin-right:10px;
  }
</style>
